<template>
    <div id="app">
        <Nav></Nav>
        <a class="Banner" href='/contact'>
            <img class="banner_img" src="https://hbrand.oss-cn-hangzhou.aliyuncs.com/new_website/index/caseBanner.jpg" alt="惠合科技" />
        </a>
        <div class="content">
            <div class="content_list">
                <a :href="'/newsDetail?id=' + item.id" class="content_item hover" v-for='item in pageData' :key='item.id'>
                    <img class='content_item_img' :src="item.picUrl" alt="">
                    <div class="content_item_title">{{ item.title }}</div>
                    <div class="content_item_tagList">
                        <div :title='t.labelName' class="content_item_tag" v-for='t in item.labels' :key='t.id'>{{ t.labelName }}</div>
                    </div>
                </a>
            </div>
           <page :allPages="allPages"  @on-change='pageChange' />
        </div>
        <Bottom></Bottom>
    </div>
</template>

<script>
import Nav from '@/components/Nav.vue';
import Bottom from '@/components/Bottom.vue';
import Page from '@/components/Page.vue';
import 'swiper/dist/css/swiper.css'
import { doPost } from '@/utils/request'
export default {
    name: 'Case',
    components: {
        Nav,
        Bottom,
        Page
    },
    data() {
        return {
            bannerList: [
                'https://hbrand.oss-cn-hangzhou.aliyuncs.com/new_website/index/caseBanner.jpg',
            ],
            swiperOptions: {
                autoplay: true,
                speed: 1000,
                //   loop: true
                // Some Swiper option/callback...
            },
            pageData: [],
            allPages: 0
        }
    },
    created () {
        this.List()
    },
    methods: {
        List (currentPage = 1) {
            doPost('pms/officialWebsiteArticle/doQueryWithPageByNoLogin.json', {
                currentPage,
                pageSize: 9,
                category: '客户案例'
            }).then(res => {
                this.pageData = res.datalist
                this.allPages = res.pageCount
            })
        },
       
        pageChange (page) {
            console.log(page)
            this.List(page)
        }
    },
    head () {
        return {
            title: '客户案例_世界500强快消品牌信赖之选_惠合科技',
            meta: [{
                hid: 'keywords',
                name: 'keywords',
                content: '快消品营销案例,开箱扫码案例,陈列自检案例,业代巡拍案例,到店核销案例,一元乐享案例'
            }, {
                hid: 'description',
                name: 'description',
                content: "惠合科技与可口可乐、玛氏箭牌、农夫山泉、雀巢、伊利等100+知名快消品牌落地了超1000场传统渠道数字营销活动。",
    
            }]
        }
    }
}
</script>

<style lang='less' scoped>
body,html{
    background: #f5f5f5;
}

div{
    transition: all .3s;
}
.Banner {
    min-width: 1400px;
    width: 100%;
    padding-top: 88px;
    position: relative;
    .banner_img {
        min-width: 1400px;
        width: 100%;
        height: 650px;
        display: block;
        object-fit: cover;
        cursor: pointer;
    }
}
.content{
    width: 1290px;
    margin: 0 auto;
    padding: 65px 0 72px;
    .content_top{
        width: 100%;
        height: 370px;
        background: #fff;
        border-radius: 4px;
        overflow: hidden;
        .boxShow();
        .content_top_img{
            width: 646px;
            height: 100%;
            float: left;
        }
        .content_top_content{
            overflow: hidden;
            padding-left: 20px;
            padding-right: 30px;
        }
        .content_top_title{
            font-size: 22px;
            line-height: 70px;
            .textOverFlow(1)
        }
        .content_top_info{
            font-size: 16px;
            color: #333;
            line-height: 28px;
            .textOverFlow(5)
        }
        .content_btn_list{
            display: flex;
            justify-content: space-between;
            margin-top: 124px;
            font-size: #333;
            font-size: 16px;
            .more{
                color: @primary-color;
                text-decoration: underline;
            }
        }
    }

    .content_list{
        width: 100%;
        &::after{
            content: '';
            clear: both;
            display: block;
        }
    }
    .content_item{
        .boxShow();
        overflow: hidden;
        float: left;
        width: 410px;
        height: 366px;
        margin-top: 30px;
        margin-right: 30px;
        font-size: 18px;
        color: #333;
        &:nth-child(3n){
            margin-right: 0;
        }
        .content_item_img{
            width: 100%;
            height: 234px;
            object-fit: cover;
            display: block;
        }
        .content_item_title{
            margin: 12px;
            line-height: 28px;
            height: 56px;
            font-size: 22px;
            .textOverFlow(2)
        }
        .content_item_tagList{
            padding: 0 12px;
            overflow: hidden;
            .content_item_tag{
                border-radius: 2px;
                background: @tag-bg-color;
                padding: 0 10px;
                color: @primary-color;
                margin-right: 10px;
                float: left;
                font-size: 18px;
            }
        }
    }
}

.hover{
    cursor: pointer;
    &:hover{
        transform: translateY(-5px);
        box-shadow: 0px 3px 40px 0px rgba(156,156,156,0.30); 
    }
}
@keyframes boost {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(10);
    }
}
</style>
